<template>
  <!--用一个 div 来捕获滚轮事件，避免事件隧道传递到 el-scrollbar-->
  <div class="layout-container">
    <el-scrollbar class="scrollbar">
      <div class="scroll-content">
        <header class="header">
          <NavigationBar></NavigationBar>
        </header>
        <div class="component-content">
          <router-view v-slot="{ Component }">
            <keep-alive :include="keepAliveViews">
              <component :is="Component"></component>
            </keep-alive>
          </router-view>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
  
  <script lang="ts" setup>
import NavigationBar from "@/components/NavigationBar.vue";
import { ref } from "vue";

// 必须在定义组件的 name 等于该字符串，才会缓存页面
const keepAliveViews = ref<string[]>([
  // 搅拌工序主页
  "mixing-process"
]);
</script>
  
  <style scoped lang="scss">
:deep(.el-scrollbar__view) {
  height: 100%; /* 设置为父容器高度的 100% */
}

@mixin common-header($opacity, $translateY, $border-thickness) {
  width: 100%;
  height: 55px;
  opacity: opacity; /* 初始透明度为0，让元素开始时不可见 */
  transform: translateY($translateY); /* 初始位置在屏幕顶部上方 */
  border-bottom: $border-thickness solid #dcdfe6;
}

.layout-container {
  height: 100%;
  width: 100%;
  .scrollbar {
    height: 100%;
    width: 100%;
    .scroll-content {
      height: 100%;
      width: 100%;
      padding-top: var(--header-height);
      .component-content {
        height: 100%;
        width: 100%;
      }
      .header {
        position: fixed;
        top: 0px;
        @include common-header(1, 0, 1px);
        // 这一段是设置背景阴影效果
        background-image: radial-gradient(transparent 1px, var(--el-bg-color) 1px);
        background-size: 4px 4px;
        backdrop-filter: saturate(50%) blur(4px);
        -webkit-font-smoothing: antialiased;
      }
    }
  }
}
</style>
  